---
title: Editor
description: From Textarea to WYSIWYG editor.
component: true
docs:
  - route: /docs/api/core/plate
    title: Plate
---

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add editor
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource name="editor" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Default

<ComponentPreview name="editor-default" />

### Disabled

<ComponentPreview name="editor-disabled" />

### Ghost

<ComponentPreview name="editor-ghost" />

### With Label

<ComponentPreview name="editor-label" />

### With Text

<ComponentPreview name="editor-text" />

### With Button

<ComponentPreview name="editor-button" />
